<template>
  <BaseChart ref="childRef" :option="options" class="chartMainContent"></BaseChart>
</template>
<script setup>
import { nextTick, onMounted, ref, shallowRef, watch } from 'vue'
import BaseChart from '../../../components/baseChart.vue'
const options = shallowRef()
const getBaseOptions = () => {
  return {
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      containLabel: true
    },
    title: {
      text: '质量评分',
      textStyle: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 600
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    radar: [
      {
        indicator: [
          { name: '有效性', max: 100 },
          { name: '完整性', max: 100 },
          { name: '合规性', max: 100 },
          { name: '及时性', max: 100 },
          { name: '准确性', max: 100 }
        ],
        nameGap: 6,
        center: ['50%', '50%'],
        radius: '80%',
        axisName: {
          color: '#fff'
        },
        splitArea: {
          areaStyle: {
            color: '#061424'
          }
        },
        // splitLine: {
        //   lineStyle: {
        //     type: 'dashed'
        //   }
        // },
        axisLine: {
          lineStyle: {
            type: 'dashed',
            color: '#D9D9D9'
          }
        }
      }
    ],
    series: [
      {
        name: '质量评分',
        type: 'radar',
        tooltip: {
          trigger: 'item'
        },
        areaStyle: {
          color: '#ffd73e'
        },
        lineStyle: {
          color: '#ffd73e'
        },
        itemStyle: {
          color: '#ffd73e'
        },
        data: [
          {
            value: [50, 80, 60, 40, 20]
          }
        ]
      }
    ]
  }
}
onMounted(() => {
  nextTick(() => {
    const option = getBaseOptions()
    options.value = option
  })
})
</script>

<style scoped lang="scss">
.chartMainContent {
  height: 5.9rem;
}
</style>
